.checkTag {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  margin-bottom: -24px;

  .item {
    margin-right: 20px;
    margin-bottom: 24px;
    padding: 7px 26px;
    color: #fff;
    background: #293e6b;
    border-radius: 18px;
    cursor: pointer;

    &:hover,
    &.actived {
      background: #254df8;
    }
  }
  .arrow {
    .icon {
      display: block;
      width: 6px;
      height: 5px;
      margin-left: 4px;
      &.up {
        background: url('./images/hui.png') no-repeat center / 100%;
        transform: rotate(-180deg);
        &.actived {
          background: url('./images/bai.png') no-repeat center / 100%;
          transform: none;
        }
      }
      &.down {
        background: url('./images/hui.png') no-repeat center / 100%;
        &.actived {
          background: url('./images/bai.png') no-repeat center / 100%;
          transform: rotate(-180deg);
        }
      }
      &:first-child {
        margin-bottom: 4px;
      }
    }
  }

  &.green {
    margin-bottom: -14px;
    .item {
      margin-right: 14px;
      margin-bottom: 14px;
      padding: 10px 21px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      &:hover,
      &.actived {
        background: rgba(41, 186, 145, 0.5);
        border: 1px solid #29ba91;
      }
    }
  }
}
